<!DOCTYPE html>
<html lang="en" debug="true">
<!--<html lang="en"  debug="true">-->
<head>
<title>Structure Generator</title>
<link rel="stylesheet" type="text/css" href="../../../thirdparty/jquery.multiselect.css" />
<link rel="stylesheet" type="text/css" href="../../../thirdparty/assets/style.css" />
<link rel="stylesheet" type="text/css" href="../../../thirdparty/assets/prettify.css" />
<link rel="stylesheet" type="text/css" href="../../../thirdparty/jquery-ui-1.8.21.custom.css" /><link rel="stylesheet" type="text/css" href="dialogs.css" />
<style type="text/css">
html {
	font-family: Tahoma, Verdana, Arial, Helvetica, sans-serif;
	font-size: 0.7em;
	height: 100%;
	background-color: #f0f0f0;
}
body {
  font:12px Helvetica, arial, sans-serif;
}
.ui-widget {
  font-family: Helvetica, arial, sans-serif;
}
.ui-slider { height: 4px; }
.ui-slider .ui-slider-handle  { margin-top: -2px; width: 8px; height: 14px;}
</style>
<script type="text/javascript" src="../../../thirdparty/jquery-ui-1.8.21.custom/js/jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="../../../thirdparty/jquery-ui-1.8.21.custom/js/jquery-ui-1.8.21.custom.min.js"></script>
<script type="text/javascript" src="../../../thirdparty/jquery.multiselect.js"></script>
<script language="javascript" src="StructureGenerator.js"></script>
</head>
<body onload="onLoad()" >
	<fieldset>
		<legend>Configuration</legend>
	<table style="width: 100%; ">
	    <tbody>
			<tr>
	            <td>
	<button id="hideConfiguration" onclick="">Setting</button>
	            <td style="text-align: right; "></td>
	        	<td witdh="30%">
		        <td >
		<input type="button" onclick="callRubyReadDataBase()" value="Import Database: "/>
		        </td>
			</tr>
		</tbody>
	</table>

  	<div id="configurations">
	<table border="0" cellpadding="4" width="100%" align="center">
	    <tr>
	        </td>
	        <td style="text-align: right; ">
	<input type="button" onclick="setDefaultConfiguration()" value="Default Configuration" />
	        </td>
	    </tr>
	</table>
	<table border="0" cellpadding="4" width="100%" align="center">
	    <tr>
	        <td id="valueConstructionHeight" width="55%">
	            Max Construction Height: 
	        </td>
	        <td >
<!-- 	            <select id="co_hghMultiSelect"  multiple="false">
	                <option value="400" >400 mm</option>
	                <option value="450" >450 mm</option>
	                <option value="500" >500 mm</option>
	                <option value="550" >550 mm</option>
	                <option value="600" selected="selected">600 mm</option>
	                <option value="650" >650 mm</option>
	                <option value="700" >700 mm</option>
	                <option value="750" >750 mm</option>
	                <option value="800" >800 mm</option>
	            </select> -->
			<div id="co_hghSlider" ></div>
	        </td>
	    </tr>
	    <tr>
	        <td  id="valueColumnZone">
	Inner Column Position: 
	        </td>
	        <td>
			<div id="clzn_rRangeSlider"></div>
	        </td>
	    </tr>
	    <tr>
	        <td>
	Primary Beam Direction:
	        </td>
	        <td>
			<select id="dirctsMultiSelect" multiple="multiple" style="width:200px">
				<option value="0" selected="selected">Transverse</option>
				<option value="1" selected="selected">Longitudinal</option>
			</select>
	        </td>
	    </tr> 
	    <tr>
	        <td>
	Fa&#231;ade width:
	        </td>
	        <td>
			<select id="fd_wdtMultiSelect" multiple="multiple" >
				<option value="1.2">1.2m</option>
				<option value="1.35">1.35m</option>
			</select>
	        </td>
	    </tr>
	    <tr>
	        <td  id="valueColumnSpacingRange">
	Column Spacing Range: 
	        </td>
	        <td>
			<div id="clsp_rRangeSlider"></div>
	        </td>
	    </tr>
	    <tr>
	        <td>
	Possible Column Spacing:
	        </td>
	        <td>
			<select id="cl_spsMultiSelect" multiple="multiple" style="width:200px">
				<option value="--"  disabled="disabled">--</option>
			</select>
	        </td>
	    </tr>
	    <tr>
	        <td id="valuePopulationSize">
	Population size:
	        </td>
	        <td>
			<div id="p_sizeSlider"></div>
	        </td>
	    </tr>
	    <tr>
	        <td id="valueNofGenerations" width="200em">
	Number of Generations:
	        </td>
	        <td>
			<div id="nof_gnSlider" ></div>
	        </td>
	    </tr>
	    <tr>
	        <td id="valueMutProb">
	Mutation Probability:
	        </td>
	        <td>
			<div id="p_mutaSlider"></div>
	        </td>
	    </tr>
	    <tr>
	        <td id="valueCrossProb" width="200em">
	Crossover Probability:
	        </td>
	        <td>
			<div id="p_crssSlider" ></div>
	        </td>
	    </tr>
	</table>
	  </div>
	</fieldset>

	<fieldset>
		<legend>Structure Generator</legend>
		<table cellspacing="5" width="100%" >
<!-- 			<tr><td colspan="2" >
				<input name="NUMOFBARS" type="text" value="0" class="static_text" style=" border: none; width: 100%; " readonly >
			</td></tr> -->
			<tr><td>
				<input type="button" class="static_text" onclick="callRubyRunGenerator()" value="Generate Structure"/>
			</td><td>
<!-- 				<img id="runningIcon" border="0" src="figures/24/running_1.png" width="24" height="24" />
			</td></tr>
			<tr><td colspan="2" >
				<b id="timerOutput">Genes</b>
			</td></tr>
			<tr><td colspan="2" > -->
				<!-- <input name="GENESTRING" type="text" value="Empty!" class="static_text" style=" border: none;" readonly="readonly" >
			</td></tr>
			</td></tr><tr><td> -->
				
			</td><td>
				<input name="STRUCTUREBUTTON" type="button" class="static_text" onclick="callRubyShowStructure()" value="Show Structure"/>
			</td></tr>
		</table>
	</fieldset>
	<fieldset>
		<legend>Result</legend>
		<div id="timerOutput" width="100%"></div>
	</fieldset>
</body>
</html>

